<template>
  <div>
    <ocean :use="template" class="theme_box"></ocean>
    <ocean :use="drawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useTableTemplate, useDrawer } from '@/ocean';
import { GlobalAPI, StoreAPI } from '@/app/api';
import { useDialog, useMessage } from 'naive-ui'
import { nextTick, ref } from 'vue';
import storeForm from './form/store.vue';

type Column = {
  createTime: "2022-08-31 18:49:18"
  endTime: "c"
  id: 8
  openTime: "null"
  openingTime: "null-c"
  status: 1
  storeAddress: "bbb"
  storeName: "aaa"
  updateTime: null
}

enum Status {
  '运营中' = 1,
  '停运',
}

const dialog = useDialog()
const message = useMessage()
const deleteRow = (row) => {
  dialog.warning({
    title: '提示',
    content: '是否确认删除门店：' + row.storeName,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      StoreAPI.deleteStore({ id: row.id }).then(() => {
        message.success('删除成功')
        template.query();
      })
    },
  })
}

const drawer = useDrawer('门店', storeForm, { size: 'small' });

drawer.button('确认', { type: 'primary' }).click(() => {
  let formRef = drawer.getRef();
  formRef.submit().then((res) => {
    if (res.code) { return message.warning(res.msg) }
      drawer.close();
      template.query();
      message.success('操作成功')
    
  })
})
drawer.button('取消').click(() => {
  drawer.close();
})

const template = useTableTemplate<Column>('门店列表', {
  query: data => StoreAPI.queryStoreList(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});

const storeList = ref([]);
template.form.item('门店名称', 'storeName').input();
template.form.item('店铺地址', 'storeAddress').input();
template.form.item('状态', 'status').select({ options:[{ label: '运营中', value: 1 }, { label: '停运', value: 2 }]  });

template.button('添加门店', { type: 'primary' }).click(() => drawer.setTitle('添加门店').open())

template.table.column('门店名称', 'storeName');
template.table.column('门店地址', 'storeAddress');
template.table.column('门店状态', 'status').enums(Status);
template.table.column('营业时间', 'openingTime');
template.table.column('创建时间', 'createTime');

template.table.define({
  title: '操作',
  render: (row) => (
    <n-space>
      <n-button on-click={() => drawer.setTitle('编辑门店').open({ row })}>编辑</n-button>
      <n-button on-click={() => deleteRow(row)}>删除</n-button>
    </n-space>
  )
});

template.query()
</script>